<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-button
					:text="tips"
					:disabled="isCountdown"
					theme="primary"
					block
					@onClick="start"
				></pure-button>
			</pj-demo>

			<!-- 自定义文本 -->
			<pj-demo title="自定义文本">
				<pure-button
					:text="tips2"
					:disabled="isCountdown2"
					theme="success"
					block
					@onClick="start2"
				></pure-button>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";
	import { usePureCodeCountdown } from "@/uni_modules/pure-utils";

	// 基础使用
	const { seconds, isCountdown, tips, start, clear } = usePureCodeCountdown({
		key: "login"
	});

	// 自定义提示文本
	const {
		seconds: seconds2,
		isCountdown: isCountdown2,
		tips: tips2,
		start: start2,
		clear: clear2
	} = usePureCodeCountdown({
		key: "register",
		defaultText: "点击发送验证码",
		countdownText: "{seconds}秒后重新发送",
		endText: "未收到？重新发送"
	});

	// 验证码
	const code = ref("");
</script>

<style lang="scss" scoped>
	.row {
		--pure-form-item-padding: 0;
		background: var(--pure-background-default);
		padding: 6px 16px;
		border-radius: var(--pure-radius-small);
	}
</style>
